<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div style="font-size: 15px;margin-bottom: 10px;"><span style="color: blue;">{{salesmanName}}</span>所对接的商户：</div>
      <s-table
        ref="table"
        size="default"
        :rowKey="(record,index)=>{return index}"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="avatar" slot-scope="text, record">
          <a-avatar :src="record.avatar" :size="54" style="margin-bottom:5px"/>
          <div>{{record.sexname}}</div>
          <div>{{record.name}}</div>
          <div>{{record.stu_id}}</div>
        </span>

        <span slot="username" slot-scope="text, record">
          <!-- <a-avatar :src="record.avatar" :size="54" style="margin-bottom:5px"/> -->
          <div>{{record.username}}</div>
          <div>{{record.password}}</div>
          <!-- <div>{{record.stu_id}}</div> -->
        </span>

        <span slot="action" slot-scope="text, record">
          <template>
            <a v-action:release_edit2>查看单商品售卖总金额</a>
          </template>
        </span>
      </s-table>
      
      <!-- <div style="font-size: 15px;margin-top: 10px;margin-bottom: 10px;">单商品售卖总金额：</div> -->

      <create-form
        ref="createModal"
        :visible="visible"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="handleCancel"
        @ok="handleOk"
      />
      <!-- <step-by-step-modal ref="modal" @ok="handleOk"/> -->
    </a-card>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import { STable } from '@/components'

// import StepByStepModal from './modules/StepByStepModal'
import CreateForm from './modules/CreateForm'
// import UpdataForm from './modules/UpdataForm'

const columns = [
  {
    title: '编号',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '标识',
    dataIndex: 'isFlag'
  },
  {
    title: '可用余额',
    dataIndex: 'rmb'
  },
  {
    title: '授信额度',
    dataIndex: 'quota'
  },
  {
    title: '添加商品的数量',
    dataIndex: 'addGoodsNum'
  },
  {
    title: '销量',
    dataIndex: 'selledNum'
  },
  {
    title: '核销量',
    dataIndex: 'checkedNum'
  },
  {
    title: '核销总金额',
    dataIndex: 'checkedTotalMoney'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '200px',
    scopedSlots: { customRender: 'action' }
  }
]
const merchant = {
  'data': [
    {
      id:1,
      name: '王五',
      isFlag: '分销商',
      AK: 'AK1006',
      SK: 'Sk1008',
      endTime: '2016-5-20',
      rmb: 50,
      username: 'admin',
      password: 123456,
      quota: 100,
      czye: 10000,
      ccye: 5000,
      addGoodsNum: 10,// 添加商品的数量
      selledNum: 140, // 销量
      checkedNum:100, //核销量
      checkedTotalMoney:5000 //核销总金额
    },
    {
      id:2,
      name: '李四',
      isFlag: '渠道商',
      AK: 'AK4402',
      SK: 'Sk4401',
      endTime: '2022-5-20',
      rmb: 150,
      username: 'Dasha',
      password: 'ymi123',
      quota: 50,
      czye: 10000,
      ccye: 5000,
      addGoodsNum: 10,// 添加商品的数量
      selledNum: 140, // 销量
      checkedNum:100, //核销量
      checkedTotalMoney:5000 //核销总金额
    },
    {
      id:3,
      name: '张三',
      isFlag: '批发商',
      AK: 'AK4402',
      SK: 'Sk4401',
      endTime: '2022-5-20',
      rmb: 150,
      username: 'Dasha',
      password: 'ymi123',
      quota: 50,
      czye: 10000,
      ccye: 5000,
      addGoodsNum: 10,// 添加商品的数量
      selledNum: 140, // 销量
      checkedNum:100, //核销量
      checkedTotalMoney:5000 //核销总金额
    }
  ],
  'pageSize': 10,
  'pageNo': 1,
  'totalPage': 6,
  'totalCount': 2
}

export default {
  components: {
    STable,
    CreateForm
  },
  data () {

    this.columns = columns
    return {
      salesmanList:[{key:1,label:'业务员1'},{key:2,label:'业务员2'},{key:3,label:'业务员3'}],
      visibles: false,
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam, {teacher: 1, volunteer: 1})
        console.log('loadData request parameters:', requestParameters)
        return new Promise((res, rej) => {
          res()
        }).then(res => {
          return merchant
        })
        // return getMember(requestParameters)
        //   .then(res => {
        //     return new Promise((res, rej) => {
        //       res()
        //     }).then(res => {
        //       return merchant
        //     })
        //   })
      },
      selectedRowKeys: [],
      selectedRows: [],
      salesmanName:''
    }
  },
  created() {
    this.salesmanName = this.$route.query.name
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  mounted() {
    console.log("this.$route.query.user_id",this.$route.query.key)
    this.queryParam.salesman = this.salesmanList[this.$route.query.key-1]
    this.$forceUpdate()
    console.log('this.queryParam.salesman',this.queryParam.salesman)
  },
  methods: {
    handleChange3Salesman(val) {
      console.log("val",val)
      console.log("this.queryParam.salesman",this.queryParam.salesman)
      // this.queryParam.salesman = this.salesmanList[this.$route.query.user_id-1].label
    },
    // 查看详情
    open(e) {
      this.item = e
      console.log('------------------', e)
      this.visibles = true
    },
      // 搜素模糊查询
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    handleAdd () {
      this.mdl = null
      this.visible = true
    },
    handleEdit (record) {
      this.visible = true
      this.mdl = { ...record }
    },
    // 创建
    handleOk () {
      const form = this.$refs.createModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
          if (values.id > 0) {
            // 修改 e.g.
            new Promise((resolve, reject) => {
              addMember(values).then(res => {
                if( res ) {
                  resolve()
                } else {
              this.confirmLoading = false
                }
              })
            }).then(res => {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.$refs.table.refresh()

              this.$message.success('修改成功')
            }).catch(error => {
              this.$message.info('该用户名已存在')
              this.confirmLoading = false
            })
          } else {
            // 新增
            new Promise((resolve, reject) => {
              addMember(values).then(value => {
                if( value ) {
                  resolve()
                } else {
                  this.confirmLoading = false
                }
              })
            }).then(res => {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.$refs.table.refresh()

              this.$message.success('新增成功')
            })
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
     // 删除
    confirm(e) {
      const form = this.$refs.createModal.form
      console.log(e);
      // delMember({id: e.id}).then(res => {
      //   // 重置表单数据
      //   form.resetFields()
      //   // 刷新表格
      //   this.$refs.table.refresh()
      //   this.$message.success('删除成功');
      // }).catch(error => {
      //   console.log('-------------error------------', error)
      // })
    },
    cancel(e) {
      console.log(e);
      this.$message.error('已取消');
    },
    handleCancel () {
      this.visible = false

      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    resetSearchForm () {
      this.queryParam = {
        date: moment(new Date())
      }
    },
    // 重置
    reset () {
      const form = this.$refs.createModal.form
      this.queryParam = {}
        // 重置表单数据
      form.resetFields()
      // 刷新表格
      this.$refs.table.refresh()
    },
  },
}
</script>
<style scoped>
/* 文字溢出隐藏并显示省略号 */
.textfont{
  width: 200px;
  height: 40px;
  /* height: 100%; */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp:2; /* 设置行数 */
	-webkit-box-orient:vertical;
}
</style>
